import React, {Component} from 'react';
import {StyleSheet, ScrollView, Text, View, FlatList, RefreshControl, Alert, ActivityIndicator, TouchableOpacity, Image} from 'react-native';
import {Button, Flex, WhiteSpace, WingBlank, Toast, SearchBar, Radio, List, DatePicker, Modal, PickerView, Tabs} from '@ant-design/react-native';
import {getParkingOrderList, getParkingViewList, getParkingFavoriteList, getParkingRentList} from '~/api/parking';
import Item from '@ant-design/react-native/lib/list/ListItem';
import Developpark from '~/components/developpark';
import moment from 'moment';
const RadioItem = Radio.RadioItem;
let pagecount = 0;
let index = 1;
let size = 10;
export default class StatisticalList extends Component {
    static navigationOptions = {
        title: '销控明细',
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);
        //列表
        this.state = {
            buildid: this.props.navigation.getParam('buildid'),
            buildName: this.props.navigation.getParam('buildName'),
            datatime: this.props.navigation.getParam('datatime'),
            endtime: '',
            type: this.props.navigation.getParam('type'), //1浏览 2销售 3收藏
            list: [],
            tabs: [
                {title: '浏览量', value: 1},
                {title: '销售量', value: 2},
                {title: '收藏量', value: 3},
            ],
            totalcount: '',
            totalpricecount: '',
            page_index: 1,
            page_size: 10,
            isLoading: false, //加载
            refreshing: false,
            footer: 0, //上拉底部显示
            timetype: 1, //1 最近七天莫一天  2最近七天 3全部
            timelist: [
                {value: 1, label: ''},
                {value: 2, label: ''},
                {value: 3, label: ''},
                {value: 4, label: ''},
                {value: 5, label: ''},
                {value: 6, label: ''},
                {value: 7, label: ''},
            ],
            timeid: 1,
            timename: this.props.navigation.getParam('datatime') || '请选择时间',
        };
        this.TabClick = this.TabClick.bind(this);
        console.disableYellowBox = true;
        this.state.timelist.forEach((item, index) => {
            item.label = moment().subtract('days', index).format('YYYY-MM-DD');
        });
        this.state.timeid = this.state.timelist.find((item) => item.label === this.state.datatime).value;
        this.onChange2 = (value) => {
            let item = this.state.timelist.find((item) => item.value === value[0]);
            this.setState({
                timename: item.label,
                timeid: value[0],
                datatime: item.label,
            });
        };
        this.onClose2 = (value) => {
            this.setState(
                {
                    visible2: false,
                    datatime: this.state.timename,
                },
                () => {
                    this.getlist();
                },
            );
        };
    }
    TabClick(tab) {
        this.setState(
            {
                type: tab.value,
            },
            () => {
                this.getlist();
            },
        );
    }

    getlist() {
        this.state.type === 1 && this.getview();
        this.state.type === 2 && this.getorder();
        this.state.type === 3 && this.getfavorite();
    }
    getview() {
        //根据时间统计每天的浏览量
        getParkingViewList({
            page_index: this.state.page_index,
            page_size: this.state.page_size,
            condidate: {
                CompanyBuildingID: this.state.buildid,
                date_time:
                    this.state.datatime === '' ? [] : [this.state.datatime, this.state.endtime === '' ? this.state.datatime : this.state.endtime],
            },
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data.list,
                    totalcount: r.data.total_item_count,
                    footer: 0,
                });
                if (this.state.page_index === 1) {
                    pagecount = r.data.total_page_count;
                    this.setState({
                        footer: r.data.total_item_count < 10 ? 2 : 0,
                    });
                }
            } else {
                Toast.info(r.msg);
            }
        });
    }
    getorder() {
        //根据时间统计每天的销售量
        getParkingOrderList({
            page_index: this.state.page_index,
            page_size: this.state.page_size,
            condidate: {
                CompanyBuildingID: this.state.buildid,
                date_time:
                    this.state.datatime === '' ? [] : [this.state.datatime, this.state.endtime === '' ? this.state.datatime : this.state.endtime],
            },
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data.list,
                    totalcount: r.data.total_item_count,
                    totalpricecount: r.data.total_order_price_count,
                    footer: 0,
                });
                if (this.state.page_index === 1) {
                    pagecount = r.data.total_page_count;
                    this.setState({
                        footer: r.data.total_item_count < 10 ? 2 : 0,
                    });
                }
            } else {
                Toast.info(r.msg);
            }
        });
    }
    getfavorite() {
        //根据时间统计每天的收藏量
        getParkingFavoriteList({
            page_index: this.state.page_index,
            page_size: this.state.page_size,
            condidate: {
                CompanyBuildingID: this.state.buildid,
                date_time:
                    this.state.datatime === '' ? [] : [this.state.datatime, this.state.endtime === '' ? this.state.datatime : this.state.endtime],
            },
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data.list,
                    totalcount: r.data.total_item_count,
                    footer: 0,
                });
                if (this.state.page_index === 1) {
                    pagecount = r.data.total_page_count;
                    this.setState({
                        footer: r.data.total_item_count < 10 ? 2 : 0,
                    });
                }
            } else {
                Toast.info(r.msg);
            }
        });
    }
    _onRefresh() {
        this.setState({footer: 0, page_index: index, page_size: size}, () => {
            this.getlist();
        });
    }
    //上拉加载更多
    loadData = () => {
        this.setState({isLoading: false});
        let dataArray = [];
        if (pagecount - 1 > 0) {
            pagecount = pagecount - 1;
            this.setState(
                {
                    page_index: this.state.page_index + 1,
                    footer: 1,
                },
                () => {
                    if (this.state.type === 1) {
                        getParkingViewList({
                            page_index: this.state.page_index,
                            page_size: this.state.page_size,
                            condidate: {
                                CompanyBuildingID: this.state.buildid,
                                date_time:
                                    this.state.datatime === ''
                                        ? []
                                        : [this.state.datatime, this.state.endtime === '' ? this.state.datatime : this.state.endtime],
                            },
                        }).then((r) => {
                            dataArray = r.data.list;
                            dataArray = this.state.list.concat(dataArray);
                            if (r.code === 0) {
                                this.setState({
                                    list: dataArray,
                                    isLoading: false,
                                });
                            } else {
                                Toast.info(r.msg);
                            }
                        });
                    } else if (this.state.type === 2) {
                        getParkingOrderList({
                            page_index: this.state.page_index,
                            page_size: this.state.page_size,
                            condidate: {
                                CompanyBuildingID: this.state.buildid,
                                date_time:
                                    this.state.datatime === ''
                                        ? []
                                        : [this.state.datatime, this.state.endtime === '' ? this.state.datatime : this.state.endtime],
                            },
                        }).then((r) => {
                            dataArray = r.data.list;
                            dataArray = this.state.list.concat(dataArray);
                            if (r.code === 0) {
                                this.setState({
                                    list: dataArray,
                                    isLoading: false,
                                });
                            } else {
                                Toast.info(r.msg);
                            }
                        });
                    } else if (this.state.type === 3) {
                        getParkingFavoriteList({
                            page_index: this.state.page_index,
                            page_size: this.state.page_size,
                            condidate: {
                                CompanyBuildingID: this.state.buildid,
                                date_time:
                                    this.state.datatime === ''
                                        ? []
                                        : [this.state.datatime, this.state.endtime === '' ? this.state.datatime : this.state.endtime],
                            },
                        }).then((r) => {
                            dataArray = r.data.list;
                            dataArray = this.state.list.concat(dataArray);
                            if (r.code === 0) {
                                this.setState({
                                    list: dataArray,
                                    isLoading: false,
                                });
                            } else {
                                Toast.info(r.msg);
                            }
                        });
                    }
                },
            );
        } else {
            this.setState({
                footer: 2,
            });
        }
    };

    //上拉底部显示
    genIndicator() {
        if (this.state.footer === 1) {
            return (
                <View style={styles.indicatorContainer}>
                    <ActivityIndicator style={styles.indicator} size={'large'} animating={true} />
                    <Text style={{textAlign: 'center'}}>正在加载更多</Text>
                </View>
            );
        } else if (this.state.footer === 2) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.footer === 0) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        上拉加载更多
                    </Text>
                </View>
            );
        }
    }
    _renderItem(item) {
        return (
            <Flex
                onPress={() => {
                    this.props.navigation.push('ParkInfo', {
                        parkingid: item.ParkingDataID,
                    });
                }}>
                <Developpark item={item} key={index} />
            </Flex>
        );
    }
    _HeaderView = () => {
        return (
            <View style={{backgroundColor: 'white'}}>
                <Flex justify={'between'} style={{width: '92%', padding: 10, marginLeft: '4%', marginRight: '4%', marginTop: '2%'}}>
                    <Text>{this.state.buildName || '全部楼盘'}</Text>
                    {this.state.type === 1 && <Text>浏览量:{this.state.totalcount}</Text>}
                    {this.state.type === 2 && (
                        <>
                            <Text>销售量:{this.state.totalcount}</Text>
                            <Text>总金额:{this.state.totalpricecount}</Text>
                        </>
                    )}
                    {this.state.type === 3 && <Text>收藏量:{this.state.totalcount}</Text>}
                </Flex>
                <Flex justify={'around'} style={{width: '92%', padding: 10, marginLeft: '4%', marginRight: '4%', marginTop: '2%'}}>
                    <Text
                        onPress={() => {
                            this.setState(
                                {
                                    timetype: 2,
                                    datatime: moment().subtract('days', 6).format('YYYY-MM-DD'),
                                    endtime: moment().format('yyyy-MM-DD'),
                                },
                                () => {
                                    this.getlist();
                                },
                            );
                        }}
                        style={(this.state.timetype === 2 && styles.selecttext) || styles.noselecttext}>
                        七日
                    </Text>
                    <Text
                        onPress={() => {
                            this.setState(
                                {
                                    timetype: 3,
                                    datatime: '',
                                    endtime: '',
                                },
                                () => {
                                    this.getlist();
                                },
                            );
                        }}
                        style={(this.state.timetype === 3 && styles.selecttext) || styles.noselecttext}>
                        全部
                    </Text>
                    <Text
                        style={(this.state.timetype === 1 && styles.selecttext) || styles.noselecttext}
                        onPress={() => {
                            this.setState({visible2: true, timetype: 1});
                            if (this.state.timeid === 0) {
                                this.setState({
                                    timeid: this.state.timelist[0].value,
                                    timename: this.state.timelist[0].label,
                                });
                            }
                        }}>
                        {this.state.timename == '' ? '选择时间' : this.state.timename}
                    </Text>
                    <Modal popup visible={this.state.visible2} animationType="slide-up" onClose={this.onClose2}>
                        <View
                            style={{
                                paddingVertical: 20,
                                paddingHorizontal: 20,
                            }}>
                            <PickerView onChange={this.onChange2} value={[this.state.timeid]} data={this.state.timelist} cols={1} />
                        </View>
                        <Button type="primary" onPress={this.onClose2}>
                            确定
                        </Button>
                    </Modal>
                </Flex>
            </View>
        );
    };
    render() {
        return (
            <View style={{flex: 1}}>
                <Tabs tabs={this.state.tabs} prerenderingSiblingsNumber={0} initialPage={this.state.index} onChange={this.TabClick}>
                    <FlatList
                        data={this.state.list}
                        style={{width: '100%'}}
                        showsVerticalScrollIndicator={false}
                        renderItem={(data) => this._renderItem(data.item)}
                        keyExtractor={(item, index) => index}
                        ListHeaderComponent={this._HeaderView}
                        ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
                        onEndReached={() => {
                            this.loadData();
                        }}
                        onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                        refreshing={true}
                        refreshControl={
                            <RefreshControl
                                refreshing={this.state.refreshing}
                                onRefresh={() => {
                                    this._onRefresh();
                                }}
                            />
                        }
                    />
                </Tabs>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    selecttext: {
        width: '30%',
        height: 40,
        backgroundColor: '#DB7093',
        textAlign: 'center',
        paddingTop: 10,
        borderWidth: 1,
        borderColor: '#d3d3d3',
        color: 'white',
    },
    noselecttext: {
        width: '30%',
        height: 40,
        backgroundColor: '#d3d3d3',
        textAlign: 'center',
        paddingTop: 10,
        borderWidth: 1,
        borderColor: '#d3d3d3',
        color: 'white',
    },
});
